<!--
 * @Author: Devin
 * @Date: 2022-02-28 14:29:37
 * @LastEditors: Devin
 * @LastEditTime: 2022-04-20 17:24:11
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通表单">
        <template #header>
          <div class="el-card-header">普通表单<span style="color: red">若出现404请刷新下</span></div>
          <div class="el-card-header-tip">使用数据驱动el-form-item，不在需要开发人员编写重复的html代码</div>
          <div class="el-card-header-tip">可以自定定位滚动条到校验的地方</div>
        </template>
        <CcForm :forms="forms"> </CcForm>
        <Code
          ><el-scrollbar height="500px"> <div v-html="code.code"></div></el-scrollbar
        ></Code>
      </el-card>
      <el-card id="复杂表单，满足大多数业务需求">
        <template #header>
          <div class="el-card-header">复杂表单，满足大多数业务需求</div>
          <div class="el-card-header-tip">使用插槽方式</div>
        </template>
        <CcForm :forms="forms1">
          <template #slotItemName="{ params, form }">
            <el-form-item
              :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
              prop="slot"
              :label="form.label"
            >
              <CcInput v-model="params.slot" placeholder="请输入"></CcInput>
            </el-form-item>
          </template>
          <template #slotLabelName="{ label }">
            <span style="color: red">{{ label }}</span>
          </template>
          <template #slotErrorName="{ error }">
            <span
              style="color: blue; position: absolute; top: 100%; padding-top: 2px; font-size: 12px; line-height: 1"
              >{{ error }}</span
            >
          </template>
          <template #slotName>
            <div class="box">
              <span>这里可以自定义content内容，有两个参数，params，form ; #slotName="{ params, form }"</span>
            </div>
          </template>
          <template #slotItemNamelist="{ params }">
            <div class="flex-to-center">
              <b>动态表单（添加/删除表单项）</b><CcButton type="text" @click="add">添加</CcButton>
            </div>
            <template v-for="(item, index) in params.list" :key="index + item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item
                    :label="'list - ' + (index + 1)"
                    :prop="'list.' + index + '.name'"
                    :rules="{
                      required: true,
                      message: '必填' + index,
                      trigger: 'blur'
                    }"
                  >
                    <CcInput v-model="item.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    :label="'list - ' + (index + 1)"
                    :prop="'list.' + index + '.age'"
                    :rules="{
                      required: true,
                      message: '必选' + index,
                      trigger: 'change'
                    }"
                  >
                    <CcSelect v-model="item.age" style="width: 100%" :optionsKey="{ value: 'id', label: 'name' }"
                    url="/select/list" :params="{ num: 20 }" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <CcButton
                    class="marginT28"
                    type="text"
                    :icon="Delete"
                    @click="delItem(index)"
                    v-if="params.list.length !== 1"
                /></el-col>
              </el-row>
            </template>
          </template>
        </CcForm>
        <Code
          ><el-scrollbar height="500px"> <div v-html="code.code1"></div></el-scrollbar
        ></Code>
      </el-card>
    </div>
    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { ccMessage } from '@/components/packages/cc-message';
import { defineComponent, reactive, ref, toRefs } from '@vue/runtime-core';
import { Delete } from '@element-plus/icons-vue';
import code from './code';
export default defineComponent({
  name: '',
  components: {},
  setup() {
    const state = reactive({
      forms: {
        input: {
          label: '输入框',
          rules: [{ required: true, message: '必填', trigger: 'blur' }],
          span: 8,
          on: {
            input: () => {
              ccMessage.success('输入事件');
            },
            blur: () => {
              ccMessage.success('失焦事件');
            }
          }
        },
        date: {
          label: '日期选择器',
          type: 'date',
          rules: [{ required: true, message: '必填', trigger: 'blur' }],
          span: 8
        },
        textarea: {
          label: '多行文本',
          type: 'textarea',
          span: 8
        },
        select: {
          label: '选择器',
          type: 'select',
          span: 8,
          url: '/select/list',
          optionsKey: { value: 'id', label: 'name' },
          params: { num: 20 }
        },
        number: {
          label: '数字',
          type: 'number',
          span: 8
        }
      },
      forms1: {
        input: {
          label: '输入框',
          rules: [{ required: true, message: '必填', trigger: 'blur' }],
          span: 8,
          on: {
            input: () => {
              ccMessage.success('输入事件');
            },
            blur: () => {
              ccMessage.success('失焦事件');
            }
          }
        },
        textarea: {
          label: '多行文本',
          type: 'textarea',
          span: 8
        },
        select: {
          label: '选择器',
          type: 'select',
          span: 8,
          url: '/select/list',
          optionsKey: { value: 'id', label: 'name' },
          params: { num: 20 }
        },
        slot: {
          label: '插槽使用el-form-item',
          slotItemName: 'slotItemName',
          span: 8
        },
        slotLabelName: {
          label: '插槽使用label',
          slotLabelName: 'slotLabelName',
          span: 8
        },
        slotErrorName: {
          label: '插槽使用error',
          slotErrorName: 'slotErrorName',
          span: 8,
          rules: [{ required: true, message: '必填', trigger: 'blur' }]
        },
        slotName: {
          label: '插槽使用content',
          slotName: 'slotName',
          span: 16,
          rules: [{ required: true, message: '必填', trigger: 'blur' }]
        },
        date: {
          label: '日期选择器',
          type: 'date',
          span: 8
        },
        list: {
          slotItemName: 'slotItemNamelist',
          value: [
            { name: '', age: '' },
            { name: '', age: '' }
          ]
        }
      },
      code,
      Delete,
      sections: [{ label: '普通表单' }, { label: '复杂表单，满足大多数业务需求' }]
    });
    const delItem = (index: number) => {
      state.forms1.list.value.splice(index, 1);
    };
    const add = () => {
      state.forms1.list.value.push({ age: '', name: '' });
    };

    return { ...toRefs(state), delItem, add };
  }
});
</script>
<style scoped lang="scss">
.box {
  border: 1px solid var(--cc-main-color);
  padding: 8px;
  border-radius: 4px;
  line-height: 1;
}
</style>
